<script setup lang="ts">
import { computed } from "vue";
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    name: "",
    level: "",
    order_effect: "",
    performance_module: "",
    performance_value: "",
    remark: "",
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

const weightOption = [{
  value: "0",
  label: "0"
}, {
  value: "1",
  label: "1"
}, {
  value: "2",
  label: "2"
}, {
  value: "3",
  label: "3"
}, {
  value: "4",
  label: "4"
}, {
  value: "5",
  label: "5"
}, {
  value: "6",
  label: "6"
}, {
  value: "7",
  label: "7"
}, {
  value: "8",
  label: "8"
}, {
  value: "9",
  label: "9"
}, {
  value: "10",
  label: "10"
}]

const modeOption = [{
  value: "solid",
  label: "固定值"
}, {
  value: "rate",
  label: "按比例"
}]

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="职位名称:" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            maxlength="50"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="职级:" prop="level">
          <el-input
            v-model="newFormInline.level"
            clearable
            maxlength="5"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="拼单绩效权重:">
          <el-select
            v-model="newFormInline.order_effect"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in weightOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="绩效计算方式:">
          <el-select
            v-model="newFormInline.performance_module"
            placeholder="请选择"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in modeOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="绩效计算值:">
          <el-input
            v-model="newFormInline.performance_value"
            clearable
            maxlength="10"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注:">
          <el-input
            v-model="newFormInline.remark"
            clearable
            maxlength="200"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
